<template>
    <div class="logs">
        <div class="search-from flex justify-between">
            <el-form :inline="true" :model="searchFrom">
                <el-form-item label="操作时间：">
                    <el-date-picker
                            v-model="rangeDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            @change="changeDate">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="操作人：">
                    <el-select v-model="searchFrom.operateId" filterable clearable placeholder="请选择操作人">
                        <el-option
                                v-for="item in userArr"
                                :key="item.id"
                                :label="item.realName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="访问路径：">
                    <el-input v-model.trim="searchFrom.operateModule" placeholder="请输入访问路径"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- 表格 -->
        <div class="table-list">
            <el-table
                    ref="table"
                    :data="tableData"
                    stripe
                    border
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column label="序号" width="60">
                    <template slot-scope="scope">
                        <span>{{ searchFrom.pageSize * (searchFrom.pageIndex - 1)  + 1 + scope.$index }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        width="80"
                        label="操作人"
                        prop="operateName">
                </el-table-column>
                <el-table-column
                        width="160"
                        prop="operateTime"
                        label="操作时间">
                </el-table-column>
                <el-table-column
                        prop="operateRemark"
                        label="访问入参">
                </el-table-column>
                <el-table-column
                        prop="operateModule"
                        label="访问路径">
                </el-table-column>
                <el-table-column
                        prop="operateResult"
                        label="操作结果">
                </el-table-column>
            </el-table>

            <div class="margin-t-10 margin-b-10 text-center">
                <el-pagination
                        @current-change="changePage"
                        :current-page.sync="searchFrom.pageIndex"
                        :page-size="searchFrom.pageSize"
                        layout="prev, pager, next, jumper"
                        prev-text="上一页"
                        next-text="下一页"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import { getLogList, getAllUser } from "../../api/systemManage";
    import {filterParams} from "../../config/utils";

    export default {
        name: 'logs',
        data () {
            return {
                pickerOptions: this.$config.pickerOptions,
                // 表格参数
                searchFrom: {
                    operateModule: '',
                    operateId: '',
                    operateTimeStart: '',
                    operateTimeEnd: '',
                    pageSize: 10,
                    pageIndex: 1
                },
                rangeDate: [],
                // 表格参数
                total: 0,
                tableData: [],
                userArr: []
            }
        },
        created () {
            this.getList();
            this.getUserArr();
        },
        methods: {
            // 获取操作人下拉数据
            getUserArr () {
                getAllUser().then(res => {
                    this.userArr = res || [];
                }).catch(()=> {})
            },
            // 查询
            search () {
                this.searchFrom.pageIndex = 1;
                this.getList();
            },
            // 列表数据
            getList() {
                let params = filterParams(this.searchFrom);
                getLogList(params).then(res => {
                    this.tableData = res.dataList || [];
                    this.total = res.total || 0;
                }).catch()
            },
            // 切换页码
            changePage(val) {
                this.searchFrom.pageIndex = val;
                this.getList();
            },
            // 选择操作时间
            changeDate (val) {
                this.searchFrom.operateTimeStart = val ? val[0] : ''
                this.searchFrom.operateTimeEnd = val ? val[1] : ''
            }
        }
    }
</script>

<style scoped>

</style>
